<template>
  <div>
    <el-tabs
      v-model="activeName"
      class="demo-tabs"
      @tab-change="handleTabClick"
    >
      <el-tab-pane label="初试考试范围" :name="1"></el-tab-pane>
      <el-tab-pane label="参考书目" :name="2"></el-tab-pane>
    </el-tabs>
    <div class="exam-scope mohu" v-if="activeName == 1">
      <div class="con" v-loading="loading" element-loading-text="数据加载中...">
        <div class="item">
          <div class="left">研究方向</div>
          <div class="right">
            <el-input v-model="examData.researchDirection" />
          </div>
        </div>
        <div class="item">
          <div
            style="
              height: 100%;
              flex: 1;
              display: flex;
              align-items: center;
              border-right: 1px solid #dcdfe6;
            "
          >
            <div class="left">政治</div>
            <div class="right">
              <el-input v-model="examData.examContentsPolitics" />
            </div>
          </div>
          <div
            style="height: 100%; flex: 1; display: flex; align-items: center"
          >
            <div class="left">英语</div>
            <div class="right">
              <el-input v-model="examData.examContentsEnglish" />
            </div>
          </div>
        </div>
        <div class="item">
          <div
            style="
              height: 100%;
              flex: 1;
              display: flex;
              align-items: center;
              border-right: 1px solid #dcdfe6;
            "
          >
            <div class="left">专业课一</div>
            <div class="right">
              <el-input v-model="examData.examContentsOther1" />
            </div>
          </div>
          <div
            style="height: 100%; flex: 1; display: flex; align-items: center"
          >
            <div class="left">专业课二</div>
            <div class="right">
              <el-input v-model="examData.examContentsOther2" />
            </div>
          </div>
        </div>
        <div
          class="item"
          style="text-align: center; width: 100%; display: block"
        >
          <div style="padding: 3px">
            <el-input
              v-model="examData.examContents"
              :autosize="{ minRows: 4, maxRows: 8 }"
              type="textarea"
              placeholder="考试范围"
            />
          </div>
        </div>
      </div>
      <div style="display: flex; justify-content: center; margin-top: 20px">
        <el-button type="primary" @click="onEdit(1, 'edit')">确定修改</el-button>
      </div>
    </div>
    <div v-if="activeName == 2" style="margin-top: 20px">
      <div class="table">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>初试参考书目</span>
              <el-button
                type="success"
                :icon="CirclePlus"
                @click="addBook(2, 'add')"
                >新增</el-button
              >
            </div>
          </template>
          <div class="mohu" style="padding: 20px">
            <el-table
              v-loading="loading"
              stripe
              element-loading-text="数据加载中..."
              empty-text="暂无数据，请重新选择条件查询"
              :data="tableData1"
              style="width: 100%"
            >
              <el-table-column prop="schoolName" label="学校名称" />
              <el-table-column prop="majorCourseCode" label="专业课代码" />
              <el-table-column prop="majorCourseName" label="专业课名称" />
              <el-table-column prop="referBook" label="参考书目名称" />
              <el-table-column prop="publishClub" label="出版社" />
              <el-table-column prop="author" label="作者" />
              <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleClick(scope.row, 2, 'edit')"
                    >编辑</el-button
                  >
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleDelete(scope.row, 2)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
      <div class="table" style="margin-top: 20px">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>复试参考书目</span>
              <el-button
                type="success"
                :icon="CirclePlus"
                @click="addBook(3, 'add')"
                >新增</el-button
              >
            </div>
          </template>
          <div class="mohu" style="padding: 20px">
            <el-table
              v-loading="loading"
              stripe
              element-loading-text="数据加载中..."
              empty-text="暂无数据，请重新选择条件查询"
              :data="tableData2"
              style="width: 100%"
            >
              <el-table-column prop="schoolName" label="学校名称" />
              <el-table-column prop="majorCourseCode" label="专业课代码" />
              <el-table-column prop="majorCourseName" label="专业课名称" />
              <el-table-column prop="researchDirection" label="研究方向名称" />
              <el-table-column prop="referBook" label="参考书目名称" />
              <el-table-column prop="publishClub" label="出版社" />
              <el-table-column prop="author" label="作者" />
              <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleClick(scope.row, 3, 'edit')"
                    >编辑</el-button
                  >
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleDelete(scope.row, 3)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog
      v-model="editDialog"
      :title="herderText"
      width="500px"
      :before-close="handleClose"
    >
      <div class="upload">
        <el-form
          ref="formRef"
          :model="formData"
          label-width="100px"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="学校名称" prop="schoolName">
            <el-input v-model="formData.schoolName" />
          </el-form-item>
          <el-form-item label="专业课代码" prop="majorCourseCode">
            <el-input v-model="formData.majorCourseCode" />
          </el-form-item>
          <el-form-item label="专业课名称" prop="majorCourseName">
            <el-input v-model="formData.majorCourseName" />
          </el-form-item>
          <el-form-item
            label="研究方向名称"
            prop="researchDirection"
            v-if="ReferType == 3"
          >
            <el-input v-model="formData.researchDirection" />
          </el-form-item>
          <el-form-item
            label="复试科目名称"
            prop="fuCourseName"
            v-if="ReferType == 3"
          >
            <el-input v-model="formData.fuCourseName" />
          </el-form-item>
          <el-form-item label="参考书目名称" prop="referBook">
            <el-input v-model="formData.referBook" />
          </el-form-item>
          <el-form-item label="出版社" prop="publishClub">
            <el-input v-model="formData.publishClub" />
          </el-form-item>
          <el-form-item label="出版年份" prop="publishYear">
            <el-input v-model="formData.publishYear" />
          </el-form-item>
          <el-form-item label="作者" prop="author">
            <el-input v-model="formData.author" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialog = false">取消</el-button>
          <el-button
            type="primary"
            :loading="buttonLoading"
            @click="confirmEdit(ReferType)"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { CirclePlus } from "@element-plus/icons-vue";
import { ref, onMounted, defineProps } from "vue";
import {
  examRange,
  earlyRefer,
  fuRefer,
  correctMajorInfo,
  addEarlyBook,
  addFuBook,
} from "@/api/api";
import { decrypt } from "@/utils/parseDate";
import { defineEmits } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import "element-plus/theme-chalk/el-message-box.css";
// 点击tab
const activeName = ref(1);
const handleTabClick = (event) => {
  console.log(event);
  if (event == 1) {
  } else if (event == 2) {
  }
};
const props = defineProps({
  majorId: String,
});
const herderText = ref("");
const tableData1 = ref([]);
const tableData2 = ref([]);
// 所有数据
const allData = ref([]);
// 加载状态
const loading = ref(false);
const obj = ref({});

// 初试参考书目
async function getEarlyRefer() {
  try {
    loading.value = true;
    const data = {
      majorOutRelationId: props.majorId,
    };
    const result = await earlyRefer(data);
    const res = JSON.parse(decrypt(result));
    console.log(res, "初试参考书目");
    if (res.status === 0 && res.result.length > 0) {
      allData.value = res.result;
      tableData1.value = res.result;
      loading.value = false;
    } else {
      tableData1 = [];
      allData = [];
      selectYear.value = "";
      yearOptions.value = [];
      loading.value = false;
    }
  } catch (error) {
    loading.value = false;
    // throw new Error(error)
  }
}
function handleDelete(row, type) {
  formData.value = {
    schoolName: row.schoolName,
    majorCourseCode: row.majorCourseCode,
    majorCourseName: row.majorCourseName,
    researchDirection: row.researchDirection,
    referBook: row.referBook,
    fuCourseName: row.fuCourseName,
    publishClub: row.publishClub,
    publishYear: row.publishYear,
    author: row.author,
    mdId: row.mdId,
    deleteFlag: true,
  };
  ElMessageBox.confirm(`确定删除${row.referBook}?`, {
    title: "提示",
    type: "warning",
    center: true,
  })
    .then(() => {
      confirmEdit(type, "delete");
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
}
// 复试参考书目
async function getFuRefer() {
  try {
    loading.value = true;
    const data = {
      majorOutRelationId: props.majorId,
    };
    const result = await fuRefer(data);
    const res = JSON.parse(decrypt(result));
    console.log(res, 2);
    if (res.status === 0 && res.result.length > 0) {
      allData.value = res.result;
      tableData2.value = res.result;
      loading.value = false;
    } else {
      tableData2 = [];
      allData = [];
      selectYear.value = "";
      yearOptions.value = [];
      loading.value = false;
    }
  } catch (error) {
    loading.value = false;
    // throw new Error(error)
  }
}
// 获取考试范围
async function getExamRange() {
  try {
    loading.value = true;
    const data = {
      majorOutRelationId: props.majorId,
    };
    const result = await examRange(data);
    const res = JSON.parse(decrypt(result));
    console.log(res);
    if (res.status === 0) {
      obj.value = res.result;
      examData.value = {
        researchDirection: res.result.researchDirection,
        examContentsPolitics: res.result.examContentsPolitics,
        examContentsEnglish: res.result.examContentsEnglish,
        examContentsOther1: res.result.examContentsOther1,
        examContentsOther2: res.result.examContentsOther2,
        examContents: res.result.examContents,
      };
    }
    loading.value = false;
  } catch (error) {
    loading.value = false;
    // throw new Error(error)
  }
}
const stateName = ref("add");
function addBook(type, name) {
  stateName.value = name;
  ReferType.value = type;
  herderText.value = type == 2 ? "新增初试参考书目" : "新增复试参考书目";
  formData.value = {
    schoolName: "",
    majorCourseCode: "",
    majorCourseName: "",
    researchDirection: "",
    referBook: "",
    fuCourseName: "",
    publishClub: "",
    publishYear: "",
    author: "",
    deleteFlag: false,
  };
  editDialog.value = true;
}
const ReferType = ref(2);
function handleClick(row, type, name) {
  stateName.value = name;
  ReferType.value = type;
  herderText.value = type == 2 ? "编辑初试参考书目" : "编辑复试参考书目";
  formData.value = {
    schoolName: row.schoolName,
    majorCourseCode: row.majorCourseCode,
    majorCourseName: row.majorCourseName,
    researchDirection: row.researchDirection,
    referBook: row.referBook,
    publishClub: row.publishClub,
    fuCourseName: row.fuCourseName,
    publishYear: row.publishYear,
    author: row.author,
    mdId: row.mdId,
    deleteFlag: false,
  };
  editDialog.value = true;
}
const editDialog = ref(false);
function handleClose() {
  editDialog.value = false;
}
const formData = ref({});
const examData = ref({});
const dataScholl = ref({});
const buttonLoading = ref(false);
function onEdit(type,name) {
  stateName.value = name;
  confirmEdit(type);
}
// 初试考试范围修改
async function confirmEdit(type, tips) {
  console.log(type, "type");
  buttonLoading.value = true;
  if (type == 1) {
    dataScholl.value = {
      examRangeRsp: {
        examContents: examData.value.examContents,
        examContentsEnglish: examData.value.examContentsEnglish,
        examContentsOther1: examData.value.examContentsOther1,
        examContentsOther2: examData.value.examContentsOther2,
        examContentsPolitics: examData.value.examContentsPolitics,
        researchDirection: examData.value.researchDirection,
      },
      gradSchoolRsp: {
        majorOutRelationId: props.majorId,
      },
    };
  } else if (type == 2) {
    dataScholl.value = {
      earlyReferBookRsps: {
        schoolName: formData.value.schoolName,
        majorCourseCode: formData.value.majorCourseCode,
        majorCourseName: formData.value.majorCourseName,
        researchDirection: formData.value.researchDirection,
        referBook: formData.value.referBook,
        fuCourseName: formData.value.fuCourseName,
        publishClub: formData.value.publishClub,
        publishYear: formData.value.publishYear,
        author: formData.value.author,
        mdId: formData.value.mdId,
        deleteFlag: formData.value.deleteFlag,
      },
      gradSchoolRsp: {
        majorOutRelationId: props.majorId,
      },
    };
  } else if (type == 3) {
    dataScholl.value = {
      fuReferBookRsps: {
        schoolName: formData.value.schoolName,
        majorCourseCode: formData.value.majorCourseCode,
        majorCourseName: formData.value.majorCourseName,
        researchDirection: formData.value.researchDirection,
        referBook: formData.value.referBook,
        fuCourseName: formData.value.fuCourseName,
        publishClub: formData.value.publishClub,
        publishYear: formData.value.publishYear,
        author: formData.value.author,
        mdId: formData.value.mdId,
        deleteFlag: formData.value.deleteFlag,
      },
      gradSchoolRsp: {
        majorOutRelationId: props.majorId,
      },
    };
  }
  console.log(stateName.value);
  if (stateName.value == "add") {
    let addData = {
      schoolName: formData.value.schoolName,
      majorCourseCode: formData.value.majorCourseCode,
      majorCourseName: formData.value.majorCourseName,
      researchDirection: formData.value.researchDirection,
      referBook: formData.value.referBook,
      fuCourseName: formData.value.fuCourseName,
      publishClub: formData.value.publishClub,
      publishYear: formData.value.publishYear,
      author: formData.value.author,
      deleteFlag: formData.value.deleteFlag,
      majorOutRelationId: props.majorId,
    };
    if (type == 2) {
      const result = await addEarlyBook(addData);
      const deRes = JSON.parse(decrypt(result));
      console.log(deRes);
      if (deRes.status === 0) {
        buttonLoading.value = false;
        ElMessage.success("添加成功!");
        getEarlyRefer();
        editDialog.value = !editDialog.value;
      } else {
        buttonLoading.value = false;
        ElMessage.warning(deRes.msg);
      }
    } else {
      const result = await addFuBook(addData);
      const deRes = JSON.parse(decrypt(result));
      console.log(deRes);
      if (deRes.status === 0) {
        buttonLoading.value = false;
        ElMessage.success("添加成功!");
        getFuRefer();
        editDialog.value = !editDialog.value;
      } else {
        buttonLoading.value = false;
        ElMessage.warning(deRes.msg);
      }
    }
  } else {
    console.log(dataScholl.value);
    const result = await correctMajorInfo(dataScholl.value);
    const deRes = JSON.parse(decrypt(result));
    console.log(deRes);
    if (deRes.status === 0) {
      buttonLoading.value = false;
      if (tips == "delete") {
        ElMessage.success("删除成功!");
      } else {
        ElMessage.success("编辑成功!");
      }
      if (type == 1) {
        getExamRange();
      } else if (type == 2) {
        getEarlyRefer();
      } else if (type == 3) {
        getFuRefer();
      }
      if (type != 1) {
        editDialog.value = !editDialog.value;
      }
    } else {
      buttonLoading.value = false;
      if (tips == "delete") {
        ElMessage.warning(deRes.msg);
      } else {
        ElMessage.warning(deRes.msg);
      }
    }
  }
}
// 将 myMethod 暴露给父组件
defineExpose({ childMethod });
function childMethod() {
  getExamRange();
  getEarlyRefer();
  getFuRefer();
}
onMounted(() => {
  getExamRange();
  getEarlyRefer();
  getFuRefer();
});
</script>
<style lang="less" scoped>
::v-deep .el-tabs__nav {
  padding-left: 80px;
}
::v-deep .el-card__body {
  padding: 0 !important;
}
.card-header {
  display: flex;
  justify-content: space-between;
}
.exam-scope {
  .con {
    margin: 0 auto;
    width: 900px;
    border: 1px solid #dcdfe6;
    .item {
      display: flex;
      align-items: center;
      //height: 44px;
      line-height: 24px;
      border-bottom: 1px solid #dcdfe6;
      &:last-child {
        border-bottom: none;
      }
      .left {
        padding: 0 12px;
        width: 65px;
        text-align: center;
      }
      .right {
        flex: 1;
        padding: 4px 12px;
        border-left: 1px solid #dcdfe6;
      }
    }
  }
}
.mohu {
  position: relative;
  z-index: 9;
}

.mohu-filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
